<!-- 正文开始 -->
<div class="layui-fluid" id="foodOrder">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar" lay-filter="foodOrder">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label title">日期</label>
                        <div class="layui-inline" style="width:90px;">
                            <input name="orderDateFrom" class="layui-input" type="text"/>
                        </div>
                        -&nbsp;
                        <div class="layui-inline" style="width:90px;">
                            <input name="orderDateTo" class="layui-input" type="text"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label title">科室</label>
                        <div class="layui-inline item">
                            <select name="deptCode" lay-filter="workPlan-deptCode" >
                                <option value="" data-default=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label title">类型</label>
                        <div class="layui-input-inline">
                            <select name="menuType" lay-verify="required" lay-filter="foodOrder-type">
                                <option value="" data-default=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label title">菜名</label>
                        <div class="layui-input-inline">
                            <input name="menuName" class="layui-input" type="text">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn btnSearch"><i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>
            <div class="foodOrderTableWrapper">
                <table class="layui-table" id="foodOrderTable" lay-filter="foodOrderTable"></table>
            </div>

        </div>
    </div>

</div>

<style>
    #foodOrder .layui-table-body .layui-table-cell{
        height: auto !important;
        white-space: normal;
    }
    #foodOrder .layui-table-body .layui-table-cell .layui-btn{
        width: 60px;
        height: 30px;
        margin-top: 5px;
        vertical-align: middle;
        padding-top: 5px;
    }
    #foodOrder .cancel {
        background-color: #FFB800;
        color: #fff;
    }
    #foodOrder .finish {
        background-color: #009688;
        color: #fff;
    }
    #foodOrder .normal {
        /*background-color: #1E9FFF;*/
        /*color: #fff;*/
    }
    #foodOrder .error {
        background-color: #FF5722;
        color: #fff;
    }
    #foodOrder .title{
        width: auto;
    }
</style>


<script>
    layui.use([ 'table', 'form', 'http','tools','laydate'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var http = layui.http;
        var tools = layui.tools;
        var laydate = layui.laydate;

        var $view = $("#foodOrder");
        var $tbView = $view.find(".foodOrderTableWrapper");
        var $deptCode = $view.find("select[name='deptCode']");
        var $orderDateFrom = $view.find("input[name='orderDateFrom']");
        var $orderDateTo = $view.find("input[name='orderDateTo']");
        var $menuType = $view.find("select[name='menuType']");
        var $menuName = $view.find("input[name='menuName']");

        var foodOrderTableIns;
        var foodTypeList;
        var orderByClause = "orderDate";

        var fnGetTypeName = function(d){
          if(typeof d.type === 'undefined' || !foodTypeList){
              return d.type;
          }
          for(var i=0;i<foodTypeList.length;i++){
              var item = foodTypeList[i];
              if(item.code == d.type){
                  return item.name;
              }
          }
          return d.type;
        };

        var fnGetStatus = function (d) {
            var s = "";
          if(typeof d.status === 'undefined'){
              s += '<span class="jzr-full-cell error">未知</span>';
          }else if(d.status == 0){
              s += '<span class="jzr-full-cell cancel">取消</span>';
          }else if(d.status == 1){
              s += '<span class="jzr-full-cell normal">有效</span>';
          }else if(d.status == 2){
              s += '<span class="jzr-full-cell finish">完成</span>';
          }else{
              s += '<span class="jzr-full-cell error">未知</span>';
          }
          return s;
        };

        var fnGetDetails = function (d) {
          if(!d.details || d.details.length <= 0){
              return "";
          }
          var s = "";
          var sStatus = "";
          for(var i=0;i<d.details.length;i++){
              var item = d.details[i];
              if(item.status == 0){
                  s += '<div class="cancel">';
                  sStatus = "取消";
              }else if(item.status == 2) {
                  s += '<div class="finish">';
                  sStatus = "完成";
              }else{
                  s += '<div class="normal">';
                  sStatus = "正常";
              }
              s += (i+1) + '. ' + item.menuName + ' - '+item.menuTypeName +  '(' + item.qty + '份, ' + item.amount + '元: ' + sStatus + ')' + '</div>';
          }
          return s;
        };

        var fnImgTemplet = function(d){
          if(d.imgUrl){
              return '<img src="' + d.imgUrl + '" height="100%">';
          }else{
              return '';
          }
        };

        $orderDateFrom.val(tools.todayStr());
        $orderDateTo.val(tools.todayStr());
        laydate.render({elem:$orderDateFrom.selector,value:tools.todayStr()});
        laydate.render({elem:$orderDateTo.selector,value:tools.todayStr()});
        tools.select.deptCodeOptions($deptCode);
        $deptCode.val("");

        var fnGetSearchParam = function () {
            return {
                orderByClause : orderByClause,
                deptCode: $deptCode.val(),
                orderDateFrom: $orderDateFrom.val(),
                orderDateTo: $orderDateTo.val(),
                menuType: $menuType.val(),
                menuName: $menuName.val()
            };
        };
        
        var fnRender = function() {
            return table.render({
                id: 'foodOrderTable',
                elem: '#foodOrderTable',
                method: 'post',
                contentType: "application/json",
                url: http.base_server + 'foodOrder/list',
                where: fnGetSearchParam(),
                page: true,
                cellMinWidth: 50,
                hide: true,
                height: 'full-200',
                limits : [10,20,30,40,50],
                limit : 20,
                autoSort: false,
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                cols: [[
                    {type: 'numbers'},
                    {field: 'orderDate', sort: true, title: '日期', width: 150},
                    {field: 'deptName', sort: false, title: '科室', width: 100},
                    {field: 'roomCode', sort: false, title: '房间', width: 80},
                    {field: 'bedName', sort: false, title: '床名', width: 60},
                    {field: 'phone', sort: false, title: '电话', width: 100},
                    {field: 'totalQty', sort: false, title: '总数量', width: 60},
                    {field: 'totalAmount', sort: false, title: '总金额', width: 70},
                    {field: 'status', sort: true, title: '状态', templet: fnGetStatus, width: 80},
                    {field: 'desc', sort: false, title: '详情', width: 400, templet: fnGetDetails }
                ]],
                error: function (code, msg) {
                    http.fail(code, msg);
                },
                done: function () {

                }
            });
        };

        tools.select.codes('FoodType',$menuType,function (res) {
            if(res.ok){
                foodTypeList = res.data;
                form.render('select','foodOrder');
                foodOrderTableIns = fnRender();
            }
        });

        var fnSearch = function(){
            var params = fnGetSearchParam();
            foodOrderTableIns.reload({where:params,page: {curr: 1}});
        };

        $view.find(".btnSearch").click(function(){
            fnSearch();
        });
        form.on("select(foodOrder-type)",function(data){
            fnSearch();
        });
        table.on("sort(foodOrderTable)",function(obj){
            orderByClause = (obj.field || '')+ ' ' + (obj.type || '');
            fnSearch();
        })

    });
</script>